<template>
	<view>
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
		<u-navbar title="不合格报送详情" :autoBack="true" leftIconColor="#fff" bgColor="transparent" :titleStyle="{ color: '#fff' }"
			safeAreaInsetTop placeholder></u-navbar>
		<!-- <view style="height: 100rpx;"></view> -->
		<view class="c">
			<view class="c1">
				<view>报送机构: 青岛谱尼测试有限公司</view>
				<view>不合格信息描述: 该批次产品不合格。</view>
				<view>报送时间:2024-10-18</view>
				<view>附件:
					<text class="file-link" @click.stop="previewFile(attachUrl, attachName)">{{ attachName }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
		data() {
			return {
				attachName: '原始记录_A4FC187431.pdf',
				// 演示用 PDF 地址，接入真实数据时替换为后端返回的文件 URL
				attachUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
			};
		}
		,methods:{
			getExt(name=''){
				const m = name.split('?')[0].match(/\.([a-zA-Z0-9]+)$/)
				return m ? m[1].toLowerCase() : ''
			},
			isImageExt(ext){
				return ['png','jpg','jpeg','gif','webp','bmp'].includes(ext)
			},
			mapFileType(ext){
				const map = { pdf:'pdf', doc:'doc', docx:'docx', xls:'xls', xlsx:'xlsx', ppt:'ppt', pptx:'pptx', txt:'txt' }
				return map[ext] || ''
			},
			previewFile(url, name){
				if(!url){
					// 如果没有 url，可在此处拼接/请求真实地址
					uni.showToast({ title:'无可预览的地址', icon:'none' })
					return
				}
				const ext = this.getExt(name || url)
				if(this.isImageExt(ext)){
					// 图片直接预览
					uni.previewImage({ urls:[url] })
					return
				}
				// H5 直接新开标签
				// #ifdef H5
				window.open(url, '_blank')
				return
				// #endif
				// APP 使用下载 + openDocument
				this.downloadAndOpen(url, name, ext)
			},
			tryOpenDocument(filePath, ext){
				return new Promise((resolve,reject)=>{
					uni.openDocument({
						filePath,
						showMenu:true,
						fileType:this.mapFileType(ext),
						success:()=>resolve('open'),
						fail:err=>reject(err)
					})
				})
			},
			async downloadAndOpen(url, name, ext){
				try{
					uni.showLoading({ title:'下载中...', mask:true })
					const dl = await new Promise((resolve,reject)=>{
						uni.downloadFile({ url, success:res=>res.statusCode===200?resolve(res):reject(res), fail:reject })
					})
					const temp = dl.tempFilePath
					try{
						await this.tryOpenDocument(temp, ext)
						uni.hideLoading()
						return
					}catch(e){/* 继续尝试保存后再开 */}
					const saved = await new Promise((resolve,reject)=>{
						uni.saveFile({ tempFilePath: temp, success:res=>resolve(res.savedFilePath), fail:reject })
					})
					try{
						await this.tryOpenDocument(saved, ext)
						uni.hideLoading()
						return
					}catch(e){/* 继续使用系统打开 */}
					// #ifdef APP-PLUS
					plus.runtime.openFile(saved, {}, ()=>{
						uni.hideLoading();
						uni.showToast({ title:'未找到可打开的应用', icon:'none' })
					})
					// #endif
				}catch(err){
					uni.hideLoading()
					uni.showToast({ title:'下载失败', icon:'none' })
				}
			}
		}
	}
</script>

<style lang="scss">
	.c {
		padding: 20rpx;
		.c1 {
			border-radius: 20rpx;
			background: #fff;
			padding: 20rpx;
			view {
				margin: 20rpx;
			}
		}
	}
	.file-link { color: #409EFF; text-decoration: underline; }
	.mine-navbar-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		
		z-index: 1;
	}
</style>
